<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>流水线详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="/js/xkube.js?v=1" charset="utf-8"></script>
    <script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <blockquote class="layui-elem-quote layui-text">
            帮助中心:<a href="#" target="_blank">添加说明文档</a>
            <a class="layui-btn" style="float:right" href="javascript:location.replace(location.href);" title="刷新">
              <i class="layui-icon">&#xe669;</i></a>
        </blockquote>
          <form class="layui-form layui-form-pane" action="" lay-filter="UpdateInfo">
              <div class="layui-form-item" pane=""  style="width:297px;">
                  <label class="layui-form-label">流水线类型</label>
                  <div class="layui-input-block">
                      <input type="radio" name="cicd_type" value="1" lay-filter="cicdType" title="阿里云流水线" checked="">
                    <!--  <input type="radio" name="cicd_type" value="2" lay-filter="cicdType" title="本地流水线" disabled> -->
                  </div>
              </div>  
          		<div class="layui-form-item" style="margin-bottom:2px;">
                    <div class="layui-inline">
                        <label class="layui-form-label">名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="cicd_name" autocomplete="off" placeholder="" class="layui-input">
                            </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">应用名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="appname" autocomplete="off" placeholder="" class="layui-input">
                            </div>
                    </div>
          		</div>
          		<div class="layui-form-item" style="margin-bottom:2px;">
                    <div class="layui-inline">
                        <label class="layui-form-label">当前集群</label>
                        <div class="layui-input-inline">
                            <select name="cluster_id" lay-filter="cluster_Id" lay-search="" id="cluster_Id">
                              <option value="">请选择集群</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">命名空间</label>
                        <div class="layui-input-inline">
                          <select name="namespace" lay-filter="name_Space" lay-search="" id="name_Space">
      	              			<option value="" selected="">所有空间</option>
          		            </select>
                        </div>
                        <div class="layui-form-mid layui-word-aux">先选集群再选命名空间</div>
                    </div>
          		</div>
  
<!-- aliyun flow config -->
              <div id ="aliyunTpl">     
              		<div class="layui-form-item" style="margin-bottom:2px">                                
                    			<div class="layui-inline">
            		  				    <label class="layui-form-label">阿里云帐号</label>
                                  <div class="layui-input-inline">
                    	            		<select name="aliyun_id" lay-filter="aliyunId" lay-search="" id="aliyunId">
                    	              			<option value="" selected="">请选择</option>
                    	            		</select>
                                  </div>
                    			</div> 
                    			<div class="layui-inline">
            		  				    <label class="layui-form-label">组织ID</label>
                                  <div class="layui-input-inline">
                    	            		<select name="organization_id" lay-filter="organizationId"  lay-search="" id="organizationId">
                    	              			<option value="" selected="">请选择</option>
                    	            		</select>
                                  </div>
                                  <div class="layui-form-mid layui-word-aux">先选帐号再选择组织</div>
                    			</div>
              		</div>	
              		<div class="layui-form-item" style="margin-bottom:2px">   
                          <label class="layui-form-label">流水线ID</label>
                          <div class="layui-input-inline">
                              <input type="text" name="pipeline_id" autocomplete="off" placeholder="必填" class="layui-input">
                          </div>
                          <div class="layui-form-mid layui-word-aux">例如:https://flow.aliyun.com/pipelines/2679891/current中的2679891</div>
              		</div>	            
              </div>
                <div class="layui-form-item" id="addBtn">
                      <button class="layui-btn" lay-submit="" lay-filter="addSubmit">添加</button>
                </div>
        </form>         
    </div>
</div>
</body>
<script type="text/javascript">
    	$(document).ready(function(){
          GetCurrClusterId();  
          //GetNamespace();	
    	});		
</script>


<script>

  var cicdName = getQueryString("cicdName");
  var clusterId = getQueryString("clusterId");
  var nameSpace = getQueryString("nameSpace");
  if (nameSpace != "") {
	  var html2 = '<option value="'+nameSpace+'">'+nameSpace+'</option>'
	  $("#name_Space").append(html2);
  }

	  $.get('/cicd/v1/GetAliyunIdList', function (resp) {
  		$.each(resp.data,function(i,item){
  			  var html = '<option value="'+item.aliyun_id+'">'+item.aliyun_id+'</option>'	
  			  $("#aliyunId").append(html);
          //var orgids = JSON.parse(item.organization_id);
          //$.each(orgids,function(i,item){
          //			var html = '<option value="'+item.id+'">'+item.name+'</option>'	
          //			$("#organizationId").append(html);
          //});
  		});
	    layui.use('form', function(){
	           var form = layui.form;
	           form.render();
	    });		
    });	


    layui.use(['form', 'table','miniTab','element'], function () {
        var $ = layui.jquery,
            form = layui.form,
            element = layui.element,
            table = layui.table;
            miniTab = layui.miniTab,
            miniTab.listen();

        //选择集群
        form.on('select(cluster_Id)', function(data){
          console.log(data.value); //得到被选中的值
      		$.get('/xkube/ns/v1/List?clusterId='+data.value, function (resp) {
              $("#name_Space").empty();
        			$.each(resp.data,function(i,item){
        				var html2 = '<option value="'+item.nameSpace+'">'+item.nameSpace+'</option>'
        				$("#name_Space").append(html2);
        			});
        			form.render();		
      	  });	
        });

			  form.val('UpdateInfo', {
          "cicd_name": cicdName
          ,"cluster_id": clusterId
          ,"namespace": nameSpace
			  });

//组织ID写数据库的情况
        form.on('select(aliyunId)', function(data){
          console.log(data.value); //得到被选中的值
        	$.get('/cicd/v1/GetAliyunIdList?aliyun_id='+data.value, function (resp) {
              var orgids = JSON.parse(resp.data[0].organization_id);
              //console.log(orgids);
              $("#organizationId").empty();
          		$.each(orgids,function(i,item){
          			var html = '<option value="'+item.id+'">'+item.name+'</option>'	
          			$("#organizationId").append(html);
          		});
        	    form.render();
            });	
        }); 
/**
//组织ID直接从流水线api读取
        form.on('select(aliyunId)', function(data){
          //console.log(data.value); //得到被选中的值
        	$.get('/cicd/v1/ListOrganizations?aliyun_id='+data.value, function (resp) {
              if (resp.success == true) {
                $("#organizationId").empty();
            		$.each(resp.organizations,function(i,item){
            			var html = '<option value="'+item.id+'">'+item.name+'</option>'	
            			$("#organizationId").append(html);
            		});
          	    form.render();
              }else{
                console.log("获取组织ID失败");
              }
            });	
        }); 
**/
        form.on('submit(addSubmit)', function (data) {
                data.field.cicd_name = data.field.cicd_name.replace(/^\s*|\s*$/g,""); //替换空格
                data.field.appname = data.field.appname.replace(/^\s*|\s*$/g,"");
                data.field.pipeline_id = data.field.pipeline_id.replace(/^\s*|\s*$/g,""); 
                data.field.cicd_type = parseInt(data.field.cicd_type);            
					      //console.log(data.field);
			          layer.confirm('确定添加?', {icon: 3, title:'提示',yes: function(index){
                     var index2 = layer.load(0, {shade: false});
                     layer.msg('此处需运行3-5s左右');
                     $.ajax({
                        url: "/cicd/v1/Add" + location.search,
                        type: "POST",
                        data: JSON.stringify(data.field),
                        dataType: "json",
                        success: function (resp) {
                              layer.close(index2);
                              if(resp.code == 0){
                                  layer.msg('添加成功', {icon: 1});
                              }else{
                                  layer.msg(resp.msg,{icon:2});
                              }
                        }
                      });		  	  
                  },
                  cancel: function(index, layero){ 
                    layer.close(index);
                    layer.close(index2);
		                console.log("不操作");
                  } 
                });
              return false;
        });

    });

</script>
</html>